<template>
	<view class="content" @touchstart.capture="touchstart" @touchend.capture="touchend" @touchmove.capture="touchmove"
		:style="{left:left + 'px',top:top + 'px',backgroundColor:background,
		height:height + 'px',width:width + 'px',}">
		<image :src="image" mode="widthFix" :style="{width:imageWidth}" v-show="show"></image>
		<image :src="imageDong" mode="widthFix" :style="{width:imageWidth}" v-show="!show"></image>

		<view class="box2" v-show="show" @click="dragClick">
			<!-- {{text}} -->
			<view class="tit">{{text}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				left: 0,
				top: 0,
				isdrag: false,
				NowLeft: '',
				disX: '',
				NowTop: '',
				disY: '',
				winW: null, // 屏幕宽
				winH: null, // 屏幕高
				width: 60,
				height: 60,
				recordWidth: 0, //记录宽度
				isOut: false, //是否在墙里   false: 否  true: 是
				show: true, //展示文字

			};
		},
		mounted() {
			this.$nextTick(function() {
				this.winH = wx.getSystemInfoSync().windowHeight // 624
				this.winW = wx.getSystemInfoSync().windowWidth //414
				console.log("屏幕宽高", this.winH, this.winW);
				// this.top = this.winH - this.height - 10;
				this.top = this.winH - (this.winH * 0.2)
				this.left = this.winW - this.width;
				console.log(111, this.top, this.left);
			})
		},
		props: ['creatTop', 'creatLeft', 'image', 'background', 'imageWidth', 'text', 'imageDong'],

		methods: {
			closeDrag(){
				this.show=false
			},
			dragClick() {
				this.$emit('dragClick')
			},
			// 开始滑动
			touchstart(e) {
				/* let that = this;
				this.isdrag = true;
				this.NowLeft = parseInt(that.left);
				this.NowTop = parseInt(that.top);
				this.disX = e.touches[0].pageX;
				this.disY = e.touches[0].pageY; */
				if (!this.isOut) {
					// 不在墙里
					this.left = this.winW - this.width / 2;
					this.show = false
				} else {
					// 在墙里
					this.left = this.winW - this.width;
					this.show = true
				}
				this.isOut = !this.isOut
				this.recordWidth = this.left

				return false;
			},
			// 滑动结束
			touchend(e) {
				return
				this.isdrag = false;
				// 宽处理
				if (this.left > this.winW) {
					let x = this.left - this.winW
					this.left -= x + this.width / 2
				} else if (this.left <= 0) {
					this.left = 0
				}

				// 高处理
				if (this.top > this.winH) {
					let y = this.top - this.winH
					this.top -= y + this.height / 2
				} else if (this.top < 15) {
					this.top = 15
				}
			},
			// 滑动中
			touchmove(e) {
				return
				if (this.isdrag) {
					this.left = this.NowLeft + e.touches[0].pageX - this.disX;
					this.top = this.NowTop + e.touches[0].pageY - this.disY;
					return false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box2 {
		position: absolute;
		left: -413rpx;
		min-height: 100rpx;
		box-sizing: border-box;
		font-size: 11px;
		padding: 10px;
		background: #fff;
		width: 405rpx;
		border-radius: 100rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #0000001a;

		.tit {
			display: inline-block;
			table-layout: fixed;
			word-wrap: break-all;
			word-break: normal;
			white-space: pre-wrap;
			width: 100%;
			float: left;
		}
	}

	.box2:before,

	.box2:after {
		position: absolute;
		content: '';
		border: 10px solid;
	}

	.box2:before {
		right: -19px;
		top: 16px;
		border-color: transparent transparent transparent #d3d3d3;
	}

	.box2:after {
		border-color: transparent transparent transparent #fff;
		right: -18px;
		top: 16px;
	}

	.content {
		/* width: 120rpx;
		height: 120rpx; */
		/* border-radius: 50%; */
		/* background-color: rgb(56, 128, 255); */
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		// box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px 0px;
		z-index: 5;
		transition: left .5s;
	}

	.content image {
		width: 40%;
	}
</style>
